<template>
    <div class="container-content">
        <el-row>
            <el-col :span="24">
                <h3 class="panel-title">编辑自购入库单</h3>
            </el-col>
        </el-row>
        <el-divider class="divider"></el-divider>
        <el-form
            ref="formRef"
            :model="formObject"
            label-width="90px"
            label-position="left"
        >
            <el-card shadow="never" class="mt20">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="项目名称">
                            <el-input placeholder="请选择项目" readonly>
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-notebook-2"
                                    style="cursor: pointer"
                                    @click="selectProject"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目编码">
                            <el-input
                                v-model="
                                    formObject.inOutStorageEntity.projectId
                                "
                                readonly
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="入库日期">
                            <el-date-picker
                                v-model="
                                    formObject.inOutStorageEntity.inOutTime
                                "
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出入库单号">
                            <el-input
                                v-model="
                                    formObject.inOutStorageEntity.purchaseCode
                                "
                                readonly
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input
                                v-model="formObject.inOutStorageEntity.remarks"
                                type="textarea"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <div class="desc-title">入库明细</div>
            <el-table
                :data="formObject.materialDetailEntityList"
                style="width: 100%"
                highlight-current-row
                border
            >
                <template #empty
                    ><el-button plain type="primary" round @click="addNewRow"
                        >添加新行</el-button
                    ></template
                >
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            plain
                            icon="el-icon-plus"
                            size="small"
                            @click="handleDataAdd(scope.$index, scope.row)"
                        ></el-button>
                        <el-button
                            plain
                            icon="el-icon-minus"
                            size="small"
                            @click="handleDataDelete(scope.$index, scope.row)"
                        ></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="仓库">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.warehouseId"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="仓库区域">
                    <template slot-scope="scope">
                        <el-form-item label-width="0px" style="margin: 0">
                            <el-input
                                v-model="scope.row.warehouseRegionId"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="数量">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="含税单价">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.taxPrice"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="税率">
                    <template slot-scope="scope">
                        <el-input
                            v-model="scope.row.taxRate"
                            clearable
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="不含税金额">
                    <template slot-scope="scope">
                        <el-input
                            v-model="scope.row.noTaxMoney"
                            clearable
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="含税金额">
                    <template slot-scope="scope">
                        <el-input
                            v-model="scope.row.taxMoney"
                            clearable
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="备注">
                    <template slot-scope="scope">
                        <el-input
                            v-model="scope.row.ramarks"
                            clearable
                        ></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <el-form-item label-width="0px" class="mt20">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { addInOutStorageList } from "@/api/system/warehouse";
export default {
    data() {
        return {
            formObject: {
                inOutStorageEntity: {
                    batchNumber: "",
                    changeTime: "",
                    contractId: "",
                    createTime: "",
                    inOutTime: "",
                    inStorageType: 1,
                    instanceId: "",
                    id: "",
                    orderId: "",
                    projectId: "",
                    purchaseCode: "",
                    remarks: "",
                    state: "",
                    supplierId: "",
                    type: 1,
                    useUserId: "",
                    warehouseId: "",
                    warehouseRegionId: "",
                },
                materialDetailEntityList: [],
            },
        };
    },
    methods: {
        selectProject() {},
        handleDataAdd() {
            if (this.formObject.materialDetailEntityList == undefined) {
                this.formObject.materialDetailEntityList = [];
            }
            let obj = {};
            obj.number = "";
            obj.taxPrice = "";
            obj.taxRate = "";
            obj.noTaxMoney = "";
            obj.taxMoney = "";
            obj.ramarks = "";
            obj.type = 3;
            obj.materialId = "";
            obj.warehouseRegionId = "";

            this.formObject.materialDetailEntityList.push(obj);
        },
        handleDataDelete(index, row) {
            this.$confirm("请确认是否要删除此行？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                    this.formObject.materialDetailEntityList.splice(index, 1);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        addNewRow() {
            this.handleDataAdd();
        },
        onSubmit() {
            this.formObject.inOutStorageEntity.id = new Date();
            addInOutStorageList(this.formObject).then((res) => {
                if (res.code === 200) {
                    this.$message({
                        message: "新增成功！",
                        type: "success",
                    });
                    this.$router.push({ path: "/Warehouse/InWare" });
                }
            });
        },
    },
    created() {},
};
</script>
<style lang="scss" scoped>
.divider {
    margin: 0;
}
</style>
